<template>
  <div class="container">
    <div class="buttons">
      <a-button class="holidayButton" type="primary" @click="submitHoliday">
        设置节假日
      </a-button>

      <a-button class="holidayButton" type="primary" @click="submitWorkDay">
        设置工作日
      </a-button>
    </div>
    <settingHolidayModel ref="settingHolidayModelRef" @save-success="listHoliday"></settingHolidayModel>
    <full-calendar firstDay="1" lang="zh" :events="holidayList" @eventClick="eventClick" @changeMonth="changeDate">
    </full-calendar>
  </div>
</template>

<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import { ref, watch, computed, onMounted } from 'vue';
import FullCalendar from "./vue-fullcalendar/fullCalendar.vue";
import settingHolidayModel from './vue-fullcalendar/settingHolidayModel.vue';
import * as parseTime from './vue-fullcalendar/utils/parseTime';
// import { listHoliday, getHoliday, updateHoliday } from "@/api/upms/holiday";

import { listHolidaySettingByYear } from '@/apis/system/holiday-setting'


// 定义响应式数据
const holidayList = ref<any[]>([]);
const events = ref<any[]>([]);
const selectedDay = ref<string>("");
const holidayStatus = ref<string>("");
const selectedYear = ref<number>(new Date().getFullYear());

const settingHolidayModelRef = ref<InstanceType<typeof settingHolidayModel>>()
// 新增
// const onAdd = () => {

// }

// 计算属性
// const useFuncList = computed(() => store.state.useFunction.useFuncList);


// 获取节假日列表
const getList = async (year: string) => {
  try {
    const response = await listHolidaySettingByYear(year);
    holidayList.value = response.data;
  } catch (error) {
    Message.warning('获取节假日列表失败!');
  }
};

const listHoliday = async () => {
  const response = await listHolidaySettingByYear(String(selectedYear.value));
  holidayList.value = response.data;
}
// 点击事件
const eventClick = (date: Date, event: any, jsEvent: MouseEvent, pos: any) => {
  selectedDay.value = parseTime.parseTime(date, "{y}-{m}-{d}");
};

// 日期改变事件
const changeDate = (start: Date, end: Date, currentStart: Date, currentDate: Date) => {
  selectedYear.value = parseInt(parseTime.parseTime(currentDate, "{y}"));
};

// 设置节假日
const submitHoliday = async () => {
  if (selectedDay.value) {
    // const param = {
    //   holidayDate: selectedDay.value,
    //   holidayFlag: "0",
    // };
    // try {
    //   Message.success('设置成功!');
    //   getList(selectedYear.value);
    // } catch (error) {
    //   Message.warning('设置节假日失败!');
    // }

    settingHolidayModelRef.value?.onOpen(selectedDay.value, '1')

  } else {
    Message.warning('请选择日期!');
  }
};

// 设置工作日
const submitWorkDay = async () => {
  if (selectedDay.value) {

    // const param = {
    //   holidayDate: selectedDay.value,
    //   holidayFlag: "1",
    // };
    // try {
    //   getList(selectedYear.value);
    //   Message.success('设置成功!');
    // } catch (error) {
    //   Message.warning('设置工作日失败!');
    // }
    settingHolidayModelRef.value?.onOpen(selectedDay.value, '0')
  } else {
    Message.warning('请选择日期!');
  }
};

// 监听年份变化
watch(selectedYear, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    getList(String(newVal));
  }
});


// 组件挂载时获取列表
onMounted(() => {
  getList(String(selectedYear.value));
});
</script>

<style lang="scss" scoped>
.container {
  padding-top: 30px;
  margin: 0 auto;
  background: #fff;

  .buttons {
    margin-left: 50px;
  }
}
</style>